<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->
<template>
    <form class="am-form wechat-caching-form" method="post" v-bind:action="initConfig.saveUrl">
        <fieldset>
            <div class="am-form-group">
                <label class="am-form-label col-sm-2">缓存类型</label>
                <div class="col-sm-10">
                    <select class="am-select" v-model="config.cacheType">
                        <option v-bind:value="item.id" v-bind:key="item.id"
                                v-for="item in supportedTypes.labels">{{item.title}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="am-form-group" v-for="formElement in validFormElements">
                <label class="am-form-label col-sm-2">{{formElement.label}}</label>
                <div class="col-sm-10">
                    <input class="am-form-field" v-bind:type="formElement.type"
                           v-bind:placeholder="formElement.placeholder"
                           v-model="config.cacheData[formElement.field]" />
                           <!--v-bind:value="config.cacheData[formElement.field]"
                           v-on:input="onFormElementInput(formElement, $event)"/>-->
                </div>
            </div>
            <div class="am-form-group">
                <div class="am-u-sm-push-2 am-u-sm-9">
                    <button class="am-btn am-btn-secondary" type="submit">保存</button>
                </div>
            </div>
        </fieldset>
    </form>
</template>

<script>
  import _ from 'lodash'

  export default {
    name: "WechatCacheConfig",
    props: ['initConfig'],
    computed: {
      validFormElements: function () {
        const id = this.config.cacheType
        return _.get(_.find(this.supportedTypes.structures, {id}), 'items', [])
      }
    },
    mounted() {
      const $form = $(this.$el)
      console.log('caching form', $form)
      $form.superForm({
        buildData: () => {
          return _.assign({}, {config: this.config}, {scope: 'caching'})
        }
      })
    },
    methods: {
      onFormElementInput(formElement, $event) {
        console.log('event is', $event)
        this.$set(this.config.cacheData, formElement.field, $event.target.value)
      }
    },
    data() {
      return {
        config: {
          cacheType: this.initConfig.cacheType,
          cacheData: this.initConfig.cacheData
        },
        supportedTypes: {
          labels: [
            {id: 'default', title: '系统默认'},
            {id: 'redis', title: 'Redis缓存'}
          ],
          structures: [
            {
              id: 'default',
              items: []
            },
            {
              id: 'redis',
              items: [
                {
                  field: 'host',
                  label: '服务器地址',
                  type: 'text',
                  placeholder: '请填写Redis主机',
                  'required': true,
                  default: '127.0.0.1'
                },
                {
                  field: 'port',
                  label: '服务器端口',
                  type: 'number',
                  placeholder: '请填写Redis主机端口',
                  'required': true,
                  default: 6379
                },
                {
                  field: 'db_select',
                  label: '数据库索引',
                  type: 'number',
                  placeholder: '请填写Redis数据库索引',
                  'required': true,
                  default: 0
                },
                {field: 'password', label: '授权密码', type: 'password', placeholder: '请填写Redis授权信息', 'required': false},
              ]
            }
          ]
        }
      }
    }
  }
</script>

<style scoped>

</style>